Spacing
Description
The spacing group can be found either in Toolbar or Detail Panel. It groups any spacing related property.
Margin
margin-top
The space is created outside of the top border. This can be set in:
margin-right
The space is created outside of the right border. This can be set in:
margin-bottom
The space is created outside of the bottom border. This can be set in:
margin-left
The space is created outside of the left border. This can be set in:
Padding
padding-top
The space is created inside of the top border. This can be set in:
padding-right
The space is created inside of the right border. This can be set in:
padding-bottom
The space is created inside of the bottom border. This can be set in:
padding-left
The space is created inside of the top border. This can be set in:
Occurences
Toolbar
Inside the Toolbar, the spacing can be changed via the Spacingbar. It's a simplified version which is similar to the Sizing Picker.
The adjustment can be made one by one for each side. Furthermore, with aid of the lock, mutliple sides can be locked to apply changes to every locked side. This simplifies changes which for example should be applied to all sides.
Moreover the Spacingbar is supplemented by the InPlSpacing.
This tool allows the adjustment of spacing related properties via drag and drop. When activating the Spacingbar, the InPlSpacing also gets activated. The borders of each side can be dragged to change the spacing, which can be done for margin and also for padding.
The lock possibility also applies for this special tool. This means, whenever multiple sides are locked, dragging any border will result in dragging all locked border equally, while only dragging one border.
Detail Panel
Here the picker differs from the Spacingbar and offers an alternative presentation, that is inspired by the classic spacing depiction of web browsers.
Essentially, the picker offers a slightly less extensive variety of possibilities. For example, the lockability doesn't apply to this picker and and also the adjustment via drag and drop is not offered. Therefore this picker is a minified version which is reduced to the necessary basics.
The depiction can be seperated into three compartments. In the center area, the dashed square represents the actual component itself. The surrounding ring depicts the padding, while the outer ring adjusts the margin.